<template>
  <div class="detail">
     <p>详情页</p>
    
    <div class="info" v-if="data">
      <img :src="data.goodsImg" alt="">
      <p class="name">{{ data.goodsName }}</p>
      <p class="price">{{ data.goodsPrice }}</p>
    </div>

  </div>
</template>

<script>
// @是/src的别名 => 从src目录下开始查找

export default {
  name: 'AboutView',
  data(){
    return {
      gid:null,
      data:null
    }
  },
  methods:{
    getGoodsDetail(){
      this.$axios.get("http://121.43.116.41/demo/php/searchGoodsByGoodsId.php",{
        params:{
          gid:this.gid,
        }
      }).then(response=>{
        return response.data;
      }).then(res=>{
        console.log("详情",res);
        var {status} = res;
        if(status){
          this.data = res.data;
        }
      })
    }
  },
  mounted(){

    // $route  $router => Vue中的全局属性,所有的Vue实例都可以访问
    // $route  当前路由信息(一个) 
    // $router  路由实例 => 包含所有的路由信息,常用于路由跳转

    // console.log("当前Vue实例",this);
    // console.log("当前路由信息",this.$route);   // 
    // console.log("当前路由实例",this.$router); 

    // query传参 =>对应接收数据的方式
    // console.log(this.$route.query);
    // this.gid = this.$route.query.gid;


    // params传参(动态路径参数) =>  对应接收数据的方式
    console.log(this.$route);

    this.gid = this.$route.params.gid;
    this.getGoodsDetail();



  }
}
</script>

<style scoped>
.detail{
  padding: 0.1rem;

}

.detail img{
  width: 100%;
}
</style>
